<template>
 <n-divider title-placement="center" >
                 日记专栏
</n-divider>
 <div v-for="item in life_Data" :key="item.index">   
   
                        <div id="text_diary"> 
                             
                    
                                    <Skeleton :loading="false" animated>
                                            <template #template>
                                                <Row>
                                                    <Col flex="1">
                                                        <Row>
                                                            <Col flex="0">
                                                                <SkeletonItem type="circle" class="ivu-mr" />
                                                            </Col>
                                                            <Col flex="1">
                                                                <SkeletonItem block width="20%" height="16px" />
                                                                <SkeletonItem block width="50%" height="16px" />
                                                            </Col>
                                                        </Row>
                                                        <SkeletonItem block width="80%" height="16px"/>
                                                        <SkeletonItem width="8%" height="16px" class="ivu-mr" />
                                                        <SkeletonItem width="8%" height="16px" class="ivu-mr" />
                                                        <SkeletonItem width="8%" height="16px"/>
                                                    </Col>
                                                    <Col flex="0">
                                                        <SkeletonItem width="280px" height="140px" />
                                                    </Col>
                                                </Row>
                                            </template>
                                            <template #default>
                                                <List item-layout="vertical">
                                                    <ListItem >
                                                        <ListItemMeta   :avatar="item.head_image" :title="item.title" :description="item.introduction" />
                                                        {{ item.text}}
                                                        <template #action>
                                                             <li><Icon :id="item.life_data_id" @click="render_details" type="md-book"  style="font-size:25px" /></li>
                                                        </template>
                                        
                                                    </ListItem>
                                                </List>
                                            </template>
                                    </Skeleton>

                    </div>            



</div>



</template>

<script setup>
import { onMounted ,ref,inject} from 'vue';
import { get_diary_data } from '../../../api/life.js';
import {useRouter } from 'vue-router';
let Router=useRouter()
let user = inject('user')()
let life_Data=ref([])


const render_details=function(e) {
    const ID = e.target.getAttribute('id')
    Router.push({ name: 'render_life_Data' ,query:{id:ID}});
}

onMounted(async() => {
    life_Data.value=await get_diary_data(user.value.get_user().id)
 
   
 })

</script>

<style scoped>
.life_body_display{
    display: inline-block;
    height: 87vh;
    width: 80vw;
    vertical-align:top;
    margin:5px 5px 0 20px;
    /* border: solid 1px bisque; */
    position:absolute;
    font-size: 18px;
    padding: 5px 5px 5px 5px;
    overflow: scroll;

}
 ::-webkit-scrollbar {
    display: none;
 }

</style>